<template>
<!--  个人资料 -->
<div class="main">
  <el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label" class="labelcolor">我的订单</span>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="item.label" :name="item.name" :key="item.id" v-for="item in pagess">
      <!-- 搜索框点击“搜索”，修改分页页数、orders -->
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderId"></el-input>
        </el-form-item>
        <el-form-item label="要货工地">
          <el-select v-model="searchForm.orderSite" placeholder="请选择要货工地">
            <el-option label="旭辉运河悦章" value="A"></el-option>
            <el-option label="大江大河" value="B"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.goodsname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="下单时间">
          <el-select v-model="searchForm.time">
            <el-option label="近一周" value="week"></el-option>
            <el-option label="近一个月" value="month"></el-option>
            <el-option label="近三个月" value="3month"></el-option>
            <el-option label="近一年" value="year"></el-option>
          </el-select>
          <el-button>自定义</el-button>
        </el-form-item>
        <el-form-item label="订单类型" prop="resource">
          <el-radio-group v-model="searchForm.type">
            <el-radio label="全部"></el-radio>
            <el-radio label="单次采购"></el-radio>
            <el-radio label="合同采购"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">导出</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <!-- 订单列表 -->
      <el-table
        :data="pageOrders"
        style="width: 100%">
        <el-table-column
          width="270">
          <template slot-scope="scope">
            <div style="display:block;background-color:rgb(245,247,250);width:270px;height:30px;">{{scope.row.type+"  "}}{{ scope.row.date }}</div>
            <div style="display:block;width:270px;height:125px;">
            <img src="../assets/images/u1174.png" alt="" style="display:inline-block;height:90px;width:90px">
              <div style="display:inline-block;height:90px;width:90px">
                <span>{{scope.row.name}}</span>
                <span>{{" X"+scope.row.num+"车"}}</span>
                <el-popover
                  placement="right"
                  width="400"
                  trigger="click">
                  <div v-if="scope.row.type=='单次'">
                  <el-carousel trigger="click" height="150px">
                    <el-carousel-item v-for="item in scope.row.subgoods" :key="item">
                      <img src="../assets/images/u1174.png" alt="" style="display:inline-block;height:50px;width:50px">
                      <p>{{item.name}}</p>
                      <p>{{"￥"+item.price+"*"+item.num+"支"}}</p>
                    </el-carousel-item>
                  </el-carousel>
                  </div>
                  <div v-else>
                  <el-carousel trigger="click" height="150px">
                    <el-carousel-item v-for="item in scope.row.subgoods" :key="item">
                      <img src="../assets/images/u1174.png" alt="" style="display:inline-block;height:90px;width:90px">
                      <p>{{item.name}}</p>
                      <p>{{ item.num+"支"}}</p>
                    </el-carousel-item>
                  </el-carousel>
                  </div>
                  <el-button type="text" slot="reference" style="display:block;"><img src="../assets/images/u15663.png" alt="" style="width:13px;height:13px;display:inline-block;">附属商品</el-button>
                </el-popover>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="540">
          <template slot-scope="scope">
            <div style="display:block;background-color:rgb(245,247,250);width:540px;height:30px;">订单号：{{ scope.row.id }}</div>
            <div style="display:inline-block;width:260px;">
              <img src="../assets/images/u15669.png" alt="" style="display:inline-block;height:50px;width:50px">
              <span>{{scope.row.site}}</span>
            </div>
            <div style="display:inline-block;width:260px;">
              <p>总额 ¥45.00</p><p>-------------------------------</p> <p>支付宝/线下转账</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <div style="display:block;background-color:rgb(245,247,250);width:540px;height:30px;">
              <img src="../assets/images/u14258.png" alt="" style="display:inline-block;width:23px;height:23px;">
              <span style="display:inline-block;">{{ "  "+scope.row.supply }}</span>
            </div>
            <div style="display:inline-block;width:260px;height:125px;">
              <span style="display:block;">{{scope.row.status}}</span>
              <el-button type="text" @click="showDetail(scope.row.id)">订单详情</el-button>
            </div>
            <div style="display:inline-block;width:260px;height:125px;">
              <div v-if="scope.row.status=='待付款'">
              <el-button type="text" style="display:inline-block;">付款</el-button>
              <el-button type="text" style="display:inline-block;">取消订单</el-button>
              </div>
              <div v-else>
              <el-button type="text" style="display:inline-block;">查看磅单</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器点击“具体页码”需要考虑当前搜索框内的结果 -->
    </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
</el-tabs>
</div>
</template>   
<script>
export default {
  data() {
    return {
      activeName: 'first',
      form: {
          name: '',
          contact: ''
        },
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      orders:[],//全部orders
      currentOrders:[],//当前tab、搜索条件的orders
      pageOrders:[
        {
          type:"单次",
          date:"2019-01-24  11:55:00",
          name:"预拌抹灰砂浆",
          num:10,
          id:"221235156131551",
          status:"待付款",//“nopay”"onway"运输中"complete"“已完成”"cancel"“已取消”
          supply:"河南荣昌建材",
          site:"旭辉运河悦章",
          subgoods:[{
            name:"防冻剂",
            num:10,
            price:10
          }]
        },
        {
          type:"合同",
          date:"2019-01-24  11:55:00",
          name:"预拌抹灰砂浆",
          num:10,
          id:"221235156131551",
          status:"运输中",//“nopay”"onway"运输中"complete"“已完成”"cancel"“已取消”
          supply:"河南荣昌建材",
          site:"旭辉运河悦章",
          subgoods:[{
            name:"防冻剂",
            num:10
          }]
        }
      ],//当前页码的orders
      searchForm:{//搜索条件
        orderId:"",
        orderSite:"",
        goodsname:"",
        time:"",
        type:""
      },
      pagess:[//tab
        {id:1,name:"first",label:"全部"},
        {id:2,name:"second",label:"待付款"},
        {id:3,name:"third" ,label:"运输中"},
        {id:4,name:"fourth",label:"已完成"},
        {id:5,name:"fifth" ,label:"已取消"}
      ]
    };
  },
  created:{
    //后端返回该用户全部订单到orders
  },
  methods:{
    onSave(){
      console.log(form);
    },
    handleClick(tab,event){//清空currentOrders，直接从orders里查找放到currentOrders里
      alert(tab.name)
      //axios数据库读相应tab的内容，默认显示"全部"
      switch(tab.name) {
          case "first":break;
          case "second":break;
          case "third":break;
          case "fourth":break;
          case "fifth":break;
          default:
      }
    },
    showDetail(val){
      alert("!!")
      window.location.href="/orderdetail?id="+val;
    }
  }
};
</script>
<style>
.el-table .cell{
  padding-left: 0px;
  padding-right: 0px;
}
.el-table .el-table__cell{
  padding: 0 0;
}
</style>